<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../css/reset.css">
    <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <style>
    .conTitle {
        padding: .1rem;
        font-weight: bolder;
        font-size: .15rem;
    }

    .til_consum {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        padding: 10px 0;
        line-height: .25rem;
        background: #A7B2C0;
        color: #fff;
        height: .25rem
    }

    .consum {
        background: #fff;
        box-sizing: border-box
    }

    .til_consum>span {
        float: left;
        width: 50%;
        text-indent: .1rem
    }

    .til_consum.posf {
        position: fixed;
        top: 0
    }

    .status_box {
        height: .4rem;
        line-height: .4rem;
        text-align: center
    }

    .consum {
        border-top: 1px solid #c7c7c7
    }

    .consum dl {
        padding: 10px 0;
        display: box;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        line-height: .25rem;
        color: #4A586A;
        font-size: .14rem
    }

    .consum dl dt {
        margin-left: .1rem;
        width: 1.5rem;
        padding-right: .02rem
    }

    .consum dl dd {
        width: 1.5rem;
        color: #4A586A;
        padding: 0 .1rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden
    }

    .consum dl:nth-last-child(1) {
        border-bottom: none
    }
    </style>
</head>

<body>
    <section>
        <div class="main">
            <div class=" conTitle">积分消费记录</div>
            <div class="til_consum">
                <span>消费类型</span>
                <span>积分</span>
            </div>
            <div class="consum">
            </div>
            <p class="status_box">加载中...</p>
        </div>
    </section>
    <script>
    ;
    (function() {
        function DocumentFont() {};
        DocumentFont.set = function() {
            var iWidth = document.documentElement.getBoundingClientRect().width;
            iWidth = iWidth > 640 ? 640 : iWidth;
            iWidth = iWidth < 300 ? 300 : iWidth;
            document.getElementsByTagName("html")[0].style.fontSize = iWidth / 3.2 + "px";
        };
        window.DocumentFont = new DocumentFont();
        DocumentFont.set();
    })();

    var Consumption = (function() {
        var Type = 1,
            PageIndex = 0,
            PageSize = 10;

        var opts = {
                $status_box: $('.st_box'),
                $box: $('.wr_box'),
                $scrollArea: $(window),
                scrollContentHeight: $(document).height(),
                scrollWindowHeight: document.documentElement.clientHeight,
                threshold: 50,
                loading: false,
                noData: false,
                tpl_noData: '<div>你还没有消费记录，请先去消费吧</div><a href="">回到首页</a>',
                tpl_loading: '加载中...',
                tpl_endData: '已经加载全部记录了',
                event_scroll: null
            },
            ConsumptionFun = function() {};


        ConsumptionFun.prototype.init = function(obj) {
            $.extend(opts, obj);

            var G = this;
            G.bindScroll();


            if ((opts.scrollContentHeight - opts.threshold) <= (opts.scrollWindowHeight + opts.$scrollArea.scrollTop())) {
                G.ajax();
            }

        }

        ConsumptionFun.prototype.ajax = function() {
            var G = this;
            ++PageIndex;
            opts.loading = true;

            opts.$status_box.html(opts.tpl_loading);

            $.ajax({
                // url: "http://10.0.10.160:9001/api/UserMainInfo/PointList",
                url: "http://127.0.0.1:9001/api/UserMainInfo/PointList",
                type: "post",
                dataType: "json",
                // url: _CONFIG[__webState].AJAX_URL + "api/UserMainInfo/PointList",
                data: {
                    Type: Type,
                    PageIndex: PageIndex,
                    PageSize: PageSize
                },
                success: function(data) {
                    if (data.Code == 0) {
                        if ($.isEmptyObject(data.Data)) {
                            if (!$('dl', opts.$box)[0]) {
                                opts.$status_box.html(opts.tpl_noData);
                            } else {
                                opts.$status_box.html(opts.tpl_endData);
                            }
                            opts.noData = true;
                            return false;
                        }
                        opts.loading = false;
                        opts.scrollContentHeight = $(document).height();
                        opts.$box.append(G.readerHtml(data.Data));
                        opts.$status_box.html('');
                    } else {
                        // popWrap.alertRemove().alert({
                        //     content: data.Message,
                        //     autoClose: false,
                        //     clickClose: true
                        // });
                    };
                }
            })

        }

        ConsumptionFun.prototype.readerHtml = function(json) {
            var tpl = "";
            $.each(json, function(k, v) {
                tpl += [
                    '<dl>',
                    '    <dt>' + v.PointType + '</dt>',
                    '    <dd>' + v.Points + '</dd>',
                    '</dl>'
                ].join("");
            })
            return tpl;

        }

        ConsumptionFun.prototype.bindScroll = function() {
            var G = this;

            $(window).on("scroll", function() {
                var winScroll = opts.$scrollArea.scrollTop();

                // console.log(scrollContentHeight , scrollWindowHeight ,winScroll);
                if (!opts.noData && !opts.loading && (opts.scrollContentHeight - opts.threshold) <= (opts.scrollWindowHeight + winScroll)) {
                    G.ajax();
                }
                // 滚动中的事件
                if (typeof(opts.event_scroll) === "function") {
                    opts.event_scroll(winScroll);
                }
            });

        }



        return ConsumptionFun;
    })();

    new Consumption().init({
        $status_box: $('.status_box'),
        $box: $('.consum'),
        event_scroll: function(winScroll) {
            var opts = this;
            $til_consum = $('.til_consum');
            if (winScroll > opts.$box.offset().top) {
                $til_consum.addClass("posf");
            } else {
                $til_consum.removeClass("posf");
            }
        },
        reader: function() {

        }
    });
    </script>
</body>

</html>
